/* 播放界面毛玻璃效果 */
// .background_img{ 
//     position: fixed;
//     top: 0;
//     left: 0;
//     bottom: 0;
//     width: 100%;
//     height: 100%;
//     filter: blur(30rpx);
//     z-index: -10;
//     transform: scale(1.5); /*和网易云音乐对比了一下，发现也是放大1.5倍*/
//   }
  
.songDetailContainer{
    height: 100%;
    background-color: #190d02d6;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.author{
    color: #ccc;
    font-size: 30rpx;
}
.sing-show{
    width: 100%;
    height: 900rpx;
   
    .singCon{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        
    }
    .songLyric{
        color: #fff;

        .lyricContainer{
            position: relative;
            width: 600rpx;
            height: 800rpx;
            margin-top: 100rpx;
            text-align: center;
            overflow: hidden;
            font-size: 33rpx;
            line-height: 72rpx;
            .lyricMove{
                position: absolute;
                width: 600rpx;
               
            }
            .lyricActive{
                color:#d43c33;
            }
        }
        .nolyric{
            margin-top: 400rpx;
        }
        
    }
    
}
.circle{
    position: absolute;
    z-index: 20;
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background-color: #fff;
    margin-top: 30rpx;
}
.needle{
    position: absolute;
    left:338rpx;

    top: 60rpx;
    z-index: 10;
    width: 185rpx;
    height: 264rpx;
    transform-origin: 40rpx 0;
    transform: rotate(-25deg);
    transition: transform 1s;
}
.needleRotate{
    transform: rotate(0deg);
}
.discContainer{
    position: absolute;
    top: 200rpx;
    
    width: 598rpx;
    height: 598rpx;
    // animation: discRotate 3s infinite;
    
    .disc{
        width: 100%;
        height: 100%;
    }
    .songCover{
        position: absolute;
        width: 355rpx;
        height: 355rpx;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}
.disAnimation{
    animation: disc 12s linear infinite 1s;
}
@keyframes disc {
    from{
        transform: rotate(0deg);
    }
    
    to{
        transform: rotate(360deg);
    }
}

.progressControl{
    position: absolute;
    bottom: 200rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 20rpx;
    width: 680rpx;
    .liveTime{
       color: #fff;
       
    }
    .barControl{
        position: relative;
        width: 520rpx;
        height: 10rpx;

        .sliderBar{
            position: absolute;
            top:-14rpx;
            left: 0;
            height: 1px;
            margin: 0;
            width: 520rpx;
            
        }
      
    }
    .duration{
        color: rgba(255,255,255,.5);
    }
}

.musicControl{
    position: absolute;
    bottom: 40rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content:space-around;
    width: 80%;
    text{
        width: 100rpx;
        text-align: center;
        color: #fff;
        font-size: 55rpx;
    }
   
    .icon-bofang{
        font-size: 90rpx;
        
    }
    .icon-zanting{
        font-size: 80rpx;
    }
}